<!-- 原告/被告 数据完善页面 -->
<template>
	<view class="add-case-detail-box">
		<view class="case-item-box" @click="caseIDShow = true">
			<view>身份</view>
			<view>
				{{ addCaseData.case_ID }}
				<u-select v-model="caseIDShow" :list="caseIDList" @confirm="selectCaseID"></u-select>
			</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</view>
		<view class="case-item-box" @click="caseNatureShow = true">
			<view>性质</view>
			<view>
				{{ addCaseData.case_nature }}
				<u-select v-model="caseNatureShow" :list="caseNature" @confirm="selectCaseNature"></u-select>
			</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</view>
		<view class="case-item-box">
			<view>名称</view>
			<view class="input-box">
				<u-input v-model="addCaseData.case_user_name" placeholder="请输入" height="94" inputAlign="right" type="text" :custom-style="inputStyle" :clearable="false" />
			</view>
		</view>
		<view class="case-item-box">
			<view>电话</view>
			<view class="input-box">
				<u-input v-model="addCaseData.case_user_phone" placeholder="请输入" height="94" inputAlign="right" type="number" :custom-style="inputStyle" :clearable="false" />
			</view>
		</view>
		<view class="case-item-box">
			<view>法定代表人</view>
			<view class="input-box">
				<u-input v-model="addCaseData.case_user_rep" placeholder="请输入" height="94" inputAlign="right" type="text" :custom-style="inputStyle" :clearable="false" />
			</view>
		</view>
		<view class="case-item-box">
			<view>地址</view>
			<view class="input-box">
				<u-input v-model="addCaseData.case_user_adress" placeholder="请输入" height="94" inputAlign="right" type="text" :custom-style="inputStyle" :clearable="false" />
			</view>
		</view>
		<!-- 添加图片区域 -->
		<view class="add-img-box">
			<view class="title">添加图片</view>
			<view class="upload-box">
				<view class="file-list" v-for="(url, index) in uploadDataList" :key="index">
					<u-image width="116" height="116" :src="url"></u-image>
					<view class="icon-box" @click.stop="cancelImgItem(index)"><u-icon name="close" color="#FFF" size="18"></u-icon></view>
				</view>
				<view class="add-file" @click="uploadFile"><u-icon name="plus" color="#CCCCCC" size="56"></u-icon></view>
			</view>
			<!-- <view class="add-img"><u-upload :action="uploadImgAction" width="120" height="120"></u-upload></view> -->
		</view>

		<!-- 底部的按钮 -->
		<bottom-btn text="确认" @click="defineClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 用于保存页面数据的对象(即表单对象)
			addCaseData: {
				// 页面 id 为 1 表示填写的是原告数据，为 2 表示完善的是被告数据(此数据由来源页传值确定)
				viewId: null,
				case_ID: '请选择', // 身份
				case_IDValue: '',
				case_nature: '个人/企业', // 性质
				case_natureValue: '',
				case_user_name: '',
				case_user_phone: '',
				case_user_rep: '',
				case_user_adress: '',
				photo_url: [] // 上传的图片路径列表
			},
			caseIDShow: false,
			caseNatureShow: false,
			// 模拟身份可选数据列表
			caseIDList: [],
			// 案例性质可选数据列表
			caseNature: [
				{
					value: 1,
					label: '个人'
				},
				{
					value: 2,
					label: '企业'
				}
			],
			// 自定义输入框的样式
			inputStyle: {
				width: '100%',
				fontSize: '32rpx',
				fontFamily: 'PingFang SC',
				fontWeight: 500,
				color: '#97979F'
			},
			// 上传的文件展示信息数据列表
			uploadDataList: []
		};
	},
	onLoad(options) {
		this.getLawyerCauseIdentify();
		this.addCaseData.viewId = options.id;
		let title = '';
		if (this.addCaseData.viewId === '1') {
			title = '原告';
		} else {
			title = '被告';
		}
		uni.setNavigationBarTitle({
			title: title + '信息'
		});
	},
	methods: {
		// 获取案由身份可选数据列表
		async getLawyerCauseIdentify() {
			const res = await this.$u.api.getLawyerCauseIdentify();
			if (!res) return;
			for (let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				};
				this.caseIDList.push(item);
			}
			// console.log(this.caseIDList);
		},
		// 选择的 身份 信息
		selectCaseID(arr) {
			this.addCaseData.case_IDValue = arr[0].value;
			this.addCaseData.case_ID = arr[0].label;
		},
		// 选择的 性质 信息
		selectCaseNature(arr) {
			this.addCaseData.case_natureValue = arr[0].value;
			this.addCaseData.case_nature = arr[0].label;
		},
		// 底部确认按钮的点击事件
		defineClick() {
			if (!this.addCaseData.case_IDValue) return this.$u.toast('身份字段必选');
			if (!this.addCaseData.case_natureValue) return this.$u.toast('性质字段必选');
			if (!this.addCaseData.case_user_name || !this.addCaseData.case_user_phone || !this.addCaseData.case_user_rep || !this.addCaseData.case_user_adress)
				return this.$u.toast('请完善必填信息');
			// 表单校验完成，携带用户输入的页面数据对象跳回 “添加案件” 页面
			// console.log(this.addCaseData);
			// this.$u.route({
			// 	type: 'redirect',	// 关闭当前页面进行跳转
			// 	url: '/myPackageA/pages/views/add-case-detail',
			// 	params: this.addCaseData,	// 把页面数据对象传递过去
			// })
			this.$u.vuex('vuex_case', this.addCaseData); // 把页面数据对象存储到 vuex 中
			this.$u.route({
				type: 'back'
			});
		},
		// 上传图片
		async uploadFile() {
			if (this.addCaseData.photo_url.length >= 9) return this.$u.toast('最多添加9张图片哦');
			uni.showLoading({
				mask: true,
				title: '上传中...'
			});
			// 1.选择图片（可以多选最多九张）
			const res = await uni.chooseImage({
				count: 9 - this.addCaseData.photo_url.length, // 最多可以选择的图片张数
				sizeType: ['original'], // original 原图，compressed 压缩图
				sourceType: ['album'] // album 从相册选图，camera 使用相机
			});
			console.log('选择图片:', res);
			if (res.length < 2) {
				// 小于2则没有选择图片
				uni.hideLoading();
				return;
			}
			// console.log('选择了多张图片', res);
			var that1 = this;
			res[1].tempFilePaths.forEach(async item => {
				// 2.将选择的图片上传到目标服务器
				const arr = await uni.uploadFile({
					// 需要上传的地址
					url: that1.vuex_uploadAction, // 保存在 vuex 中的全局上传文件的服务器路径
					// filePath  需要上传的文件
					filePath: item,
					name: 'file',
					header: {
						token: that1.vuex_token // 挂载请求头为用户的 token
					}
				});
				// console.log(arr);
				let data = JSON.parse(arr[1].data);
				// console.log('data:', data);
				if (data.code !== 1) {
					uni.hideLoading();
					that1.$u.toast(data.msg);
					return;
				}
				that1.uploadDataList.push(data.data.fullurl);
				that1.addCaseData.photo_url.push(data.data.fullurl);
			});
			uni.hideLoading();
		},
		// 删除图片按钮的点击事件
		cancelImgItem(index) {
			this.uploadDataList.splice(index, 1);
			this.addCaseData.photo_url.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.add-case-detail-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-bottom: 90rpx;
	.case-item-box {
		height: 94rpx;
		background-color: white;
		padding: 0 68rpx 0 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #e7eaf0;
		.icon {
			position: absolute;
			top: 50%;
			right: 26rpx;
			transform: translateY(-50%);
		}
		.input-box {
			width: 72%;
		}
	}
	.add-img-box {
		// min-height: 280rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		.title {
			height: 113rpx;
			line-height: 113rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
		}
		.upload-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 20rpx;
			.file-list {
				margin-bottom: 20rpx;
				margin-right: 25rpx;
				position: relative;
				.icon-box {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #ef0000;
					position: absolute;
					top: -13rpx;
					right: -13rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 9;
				}
			}
			.add-file {
				width: 116rpx;
				height: 116rpx;
				border: 1rpx solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				// line-height: 116rpx;
				// text-align: center;
				// border: 1px solid $u-text-color;
				// color: $u-text-color;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
